<template>
    <div class="singer-res">
        <div class="result">
            <h3>
                搜索{{keywords}},找到{{artistCount}}位歌手
            </h3>
        </div>
         <!-- 歌手展示 -->
         <Singerlist :singers="singers"/>
        <div class="pageinatin">
                <!-- @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :hide-on-single-page="true"
                :page-sizes="[30, 50, 100]"
                :page-size="pageSize"
                layout="prev, pager, next, jumper,total,sizes"
                :total="artistCount">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import Singerlist from '@/components/content/singerlist/Songerlist.vue'
export default {
    name: "",
    components: { Singerlist },
    data() {
        return {
            keywords:"",
            singers:[], // 歌手列表
            artistCount:0, // 总记录数
            currentPage:1,
            pageSize:30

        };
    },
    created() {
        // 获取搜索关键字
        this.keywords = this.$route.params.keywords;
        this.getSearchSingerBy()
    },
    methods: {
        async getSearchSingerBy(){
            let offset = (this.currentPage - 1) * this.pageSize;
            // 发送请求
            let resSinger = await this.$API.searchdetail.getSearchSonger(this.keywords,offset,this.pageSize);
            console.log(resSinger)
            if(resSinger.code == 200){
                this.singers = resSinger.result.artists;
                this.artistCount = resSinger.result.artistCount
            }
        },
        handleCurrentChange(page){
            this.currentPage = page;
            this.getSearchSingerBy();
        },
        handleSizeChange(size){
            this.currentPage = 1;
            this.pageSize = size;
            this.getSearchSingerBy()
        }
    },
    
    
}
</script>
<style lang="less" scoped>
    .result{
        h3{
            margin: 10px 10px;
        }
    }
</style>